<template>
    <div class="main">
        <side-bar-menu side-bar-name="vote/item/manage"></side-bar-menu>
        <head-nav-bar title-value="投票项目"></head-nav-bar>

        <div class="main-frame">

            <Row>
                <Col span="3" style="margin-top: 10px ">
                <Button type="info" style="margin-bottom: 10px" @click="createVoteItem">创建项目</Button>

                </Col>
                <Col span="3" style="margin-top: 10px ">
                <Cascader trigger="hover" :data="cascaderData" v-model="cascaderValue" @on-change="cascaderChange" placeholder="点击选择活动和对应分类" :load-data="loadData" style="margin-bottom: 10px;width: 200px;"></Cascader>
                </Col>
            </Row>


            <Row :gutter="16">
                <Col span="12" v-for="(item, i) in voteItemList" :key="i" style="margin-top: 10px ">
                <Card :bordered="false">
                    <p slot="title">{{ item.title }}</p>
                    <a href="#" slot="extra" style="color: red" @click.prevent="deleteItem(item.id)">
                        <Icon type="trash-a" size="20"></Icon>
                    </a>
                    <div style="text-align:center;">
                        <img :src="'http://cdn.maxstudiozhuhai.com/' + item.imgUrl" style="height: 260px;width: 100%;">
                        <h5>{{ item.brief }}</h5>
                    </div>
                </Card>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
    import SideBarMenu from '../components/SideBarMenu'
    import HeadNavBar from '../components/HeadNavBar'
    import VoteItemCreate from './voteItemManageCreate.vue'
    import util from '../../libs/util'

    export default {
        data() {
            return {
                cascaderData: [],
                cascaderValue: [],
                voteItemList: [],
                newVoteItem: {}
            }
        },
        components: {
            SideBarMenu,
            HeadNavBar,
            VoteItemCreate
        },
        methods: {
            deleteItem(id) {

                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认删除该项目吗？</p>',
                    onOk: () => {
                        util.ajax({
                            url: '/admin/entry/delete',
                            method: 'post',
                            params: {entryId: id},
                        }).then(response => {

                            if (response.data.errorCode === 0) {
                                this.voteItemList = this.voteItemList.filter(t => t.id !== id)
                                this.$Message.success('删除成功');
                            } else {
                                this.$Message.error(response.data.message);
                            }

                        }).catch(error => {//失败
                            console.log(error)
                        });
                    },
                    onCancel: () => {

                    }
                });

            },
            cascaderChange(value) {

                if (value.length === 2) {
                    util.ajax({
                        url: '/admin/entry',
                        method: 'get',
                        params: {activityId: value[0], catalogId: value[1]},
                    }).then(response => {

                        var data = response.data.data;

                        if (response.data.errorCode === 0) {
                            this.voteItemList = data;
                        }

                    }).catch(error => {//失败
                        console.log(error)
                    });
                } else {
                    this.voteItemList = []
                }

            },
            createVoteItem() {

                if (this.cascaderValue.length < 2) {
                    this.$Message.error('请先选择活动和分类');
                    return;
                }

                this.$Modal.confirm({
                    okText: '创建',
                    onOk: () => {
                        util.ajax({
                            url: '/admin/entry/create',
                            method: 'post',
                            params: {
                                title: this.newVoteItem.title,
                                imgUrl: this.newVoteItem.imgUrl,
                                brief: this.newVoteItem.brief,
                                activityModel: this.cascaderValue[0],
                                catalogModel: this.cascaderValue[1]
                            },
                        }).then(response => {

                            if (response.data.errorCode === 0) {
                                this.$Message.success('操作成功');
                                this.cascaderChange(this.cascaderValue)
                            } else {
                                this.$Message.error(response.data.message);
                            }

                        }).catch(error => {
                            console.log(error);
                            this.$Message.error('网络错误!');
                        });
                    },
                    render: (h) => {
                        return h(VoteItemCreate, {
                            props: {
                                voteItem: this.newVoteItem
                            }
                        })
                    }
                })
            },
            loadData (item, callback) {
                item.loading = true;

                util.ajax({
                    url: '/admin/catalog',
                    method: 'get',
                    params: {activityId: item.value},
                }).then(response => {

                    var data = response.data.data;

                    if (response.data.errorCode === 0) {

                        if (data.length === 0) {
                            item.children = [
                                {
                                    label: '暂无数据',
                                    value: ''
                                }
                            ];
                        }

                        for (var i = 0; i < data.length; i++) {

                            var catalog = {
                                value: data[i].id,
                                label: data[i].name
                            };

                            item.children.push(catalog)
                        }
                    }

                    item.loading = false;
                    callback();

                }).catch(error => {//失败
                    console.log(error)
                });
            },
            retrieveActivity () {
                util.ajax({
                    url: '/admin/activity/all',
                    method: 'get',
                    params: {},
                }).then(response => {

                    var data = response.data.data;

                    if (response.data.errorCode === 0) {

                        this.cascaderData = [];

                        for (var i = 0;i < data.length;i++) {

                            var activity = {
                                value: data[i].id,
                                label: data[i].title,
                                children: [],
                                loading: false
                            };

                            this.cascaderData.push(activity)
                        }

                    }

                }).catch(error => {//失败
                    console.log(error)
                });
            }
        },
        mounted() {
            this.retrieveActivity()
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>